<template>
  <div class="home">
    <ul class="list">
     
       <router-link to="/home/homepage" tag="li">
        <i class="el-icon-s-home"></i> <span>主页</span>
           </router-link>

          <router-link to="/home/swagger" tag="li">
           <i class="el-icon-edit-outline"></i><span>Swagger Models</span>
           </router-link>  
    

       <li>
        <div class="box" @click="fn()">
           <i class="el-icon-document"></i> <span>文档管理</span>
        </div>
        
         <ul class="list2" v-if="odd" >
          <router-link to="/home/all" tag="li">
              <span>全局参数设置</span>
           </router-link>

            <router-link to="/home/docu" tag="li">
                <span>离线文档</span>
           </router-link>

            <router-link to="/home/selfdom" tag="li">
              <span>个性化设置</span>
           </router-link>
        
         </ul>
           </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
// @ is an alias to /src
//import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  data(){
      return{
        odd:0
      }
    },
  methods:{
    
    goTo(v,m){
      this.$router.replace('/home'+v)
    },
    fn(){
      
      if(this.odd==0){
        this.odd=1
      }else{
        this.odd=0
      }
    }
  }
}
</script>
<style scoped >

*{
  padding:0;margin:0;
}
ul{
  list-style:none;
}
ul.list{
   width:300px;
  position:fixed;top:0;left:0; background:#444;
  height:600px;
}
li{
  color:#eee;text-align:left;padding: 10px 0; 
}
ul.list2{
  background:#999;
}
ul.list2 li{
  padding:10px 20px; 
}
.box{
  padding-bottom: 10px;
}

.a{
  background:blue;
}
</style>